<template>
	<view class="video_list">
		<view class="swiper_box">
			<swiper class="swiper" :vertical="true" 
			@change="change"
			@touchstart="touchStart"
			@touchend="touchEnd"
			>
				<swiper-item  
				v-for="(item,index) of videos" 
				:key="item.id"
				>
					<view class="swiper-item">
						<video-player 
						@changeClick="changeClick"
						ref="player"
						:video="item"
						:index="index"
						></video-player>
					</view>
					<view class="left-box">
						<list-left :item="item"></list-left>
					</view>
					<view class="right-box">
						<list-right :item="item" ref="right"></list-right>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import videoPlayer from "./video-player.vue";
	import listLeft from "./list-left.vue";
	import listRight from "./list-right.vue";
	var time=null;
	export default {
		props:['video'],
		components:{
			videoPlayer,
			listLeft,
			listRight
		},
		data() {
			return {
				videos:[],
				pageStartY:0,
				pageEndY:0,
				page:0
			};
		},
		methods:{
			changeClick(){
				// 点赞，调用list-right方法
				this.$refs.right[0].change()
			},
			change(res){
				clearTimeout(time)
				this.page=res.detail.current
				time=setTimeout(()=>{
					if(this.pageStartY < this.pageEndY){
						this.$refs.player[this.page].player()
						this.$refs.player[this.page+1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}else{
						this.$refs.player[this.page].player()
						this.$refs.player[this.page-1].pause()
						this.pageStartY=0
						this.pageEndY=0
					}
				},1)

			},
			touchStart(res){
				this.pageStartY=res.changedTouches[0].pageY
			},
			touchEnd(res){
				this.pageEndY=res.changedTouches[0].pageY
			}
		},
		watch:{
			video(){
				this.videos=this.video
			}
		}
	}
</script>

<style>
.video_list{
	height: 100%;
	width: 100%;

}
.swiper_box{
	height: 100%;
	width: 100%;	
}
.swiper{
	height: 100%;
	width: 100%;	
}
.swiper-item{
	height: 100%;
	width: 100%;
	z-index: 19;
}
.left-box{
	z-index: 20;
	position: absolute;
	bottom: 50px;
	left: 10px;
}
.right-box{
	z-index: 20;
	position: absolute;
	bottom: 50px;
	right: 10px;
}
</style>
